<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX插值表达式</title>
		<style>
			.cover{
				width: 80px;
				height: 80px;
				padding: 5px;
				border:solid 1px orangered;
				border-radius: 8px;
				box-shadow: #888 2px 2px 5px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			// 模拟数据
			let user  = {
				username: "大牧",
				img: "./images/1.webp"
			}
			
			// jsx结构
			// class样式：通过className属性指定
			// style样式：通过插值表达式指定（不能使用字符串）
			let imgStyle = {
				width: "80px",
				height: "80px"
			}
			let div = 	<div>
							<p>姓名: { user.username }</p>
							<p className='cover'>
								<img src={user.img} 
									style={imgStyle}/>
							</p>
							<p className="cover">
								<img src={ user.img }
									style={{ width:"60px", height: "60px" }}/>
							</p>
						</div>
						
			// 渲染展示
			ReactDOM.render(div, document.querySelector("#app"))
			
		</script>
	</body>
</html>